.groupGrouping {
  .groupCardWrap {
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid rgba(237, 242, 249, 100);
    background-color: #fff;

    .groupItemWrap {
      .groupItem {
        height: 58px;
        padding: 21px 10px;
        line-height: 18px;

        .iconWrap {
          .rightIcon {
            animation: spinRight 0.3s ease;
          }
          .downIcon {
            animation: spinDown 0.3s ease;
          }
        }

        .name {
          margin-left: 8px;
          line-height: 16px;
          color: var(--primary-text-color);
          font-size: 14px;
          text-align: left;
          font-family: Arial-bold;
        }

        .count {
          line-height: 18px;
          color: rgba(149, 169, 201, 100);
          font-size: 12px;
          text-align: right;
          font-family: PingFangSC-regular;
          margin-right: 10px;
        }
        &.groupItemOpen {
          border-bottom: 1px solid #edf2f9;
        }
      }

      & + .groupItemWrap {
        .groupItem {
          border-top: 1px solid #edf2f9;
        }
      }
    }
  }
  .btnWrap {
    padding: 16px 24px 20px 24px;
    & > * {
      margin-left: 6px;
    }
  }
}

@keyframes spinDown {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes spinRight {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
